<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="viewport"
        content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">

    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="moble.css">
</head>

<body>
    <!-- 顶部栏 -->
    <header>
        <div class="hdWraper">
            <!-- <div class="" style="height: 75px;"></div> -->
            <!-- class m-hd -->
            <div class="">
                <div></div>
                <div class="m-indexHd">
                    <!-- 头部 -->
                    <div class="line">
                        <a class="logo" href=""></a>
                        <div class="m-topSearchIpt ipt">
                            <i class="icon u-icon-hd-search2"></i>
                            <span class="placeholder">搜索商品</span>
                        </div>
                        <div class="loginBtn">登录</div>
                    </div>

                    <!-- 导航栏 -->
                    <div class="tabWrap">
                        <div class="tm-tabs tm-scroll">
                            <header>
                                <div class="inner"
                                    style="position: relative; height: 100%; width: 100%; overflow: hidden;">
                                    <div class="list" 
                                         style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); 
                                                transition-duration: 0ms;
                                                transform: translate(0px, 0px) translateZ(0px);">
                                        <div class="tab active"><span class="txt">推荐</span></div>
                                        <div class="tab"><span class="txt">居家生活</span></div>
                                        <div class="tab"><span class="txt">宠物生活</span></div>
                                        <div class="tab"><span class="txt">服饰鞋包</span></div>
                                        <div class="tab"><span class="txt">美食酒水</span></div>
                                        <div class="tab"><span class="txt">个护清洁</span></div>
                                        <div class="tab"><span class="txt">母婴亲子</span></div>
                                        <div class="tab"><span class="txt">运动旅行</span></div>
                                        <div class="tab"><span class="txt">数码家电</span></div>
                                        <div class="tab"><span class="txt">严选全球</span></div>
                                        <div class="tab"></div> <div class="tab"></div>
                                        
                                    </div>
                                </div>

                            </header>
                        </div>
                        <div class="toggleWrap">
                            <div class="liner"></div>
                            <div class="toggle">
                                <div class="icon"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </header>
    <!-- 加载时图片 -->
    <!-- <img id="skeleton" style="position: absolute; left: 0px; right: 0px; width: 100%; height: 100%; vertical-align: top; font-size: 0px; line-height: 0px; z-index: -100; opacity: 0; display: none;" src="//yanxuan-static.nosdn.127.net/hxm/yanxuan-mall-wap/style/img/skeleton/index-594afd792fffbe32e120.png"> -->

    <div class="white">

    </div>

    <!-- 下部分 -->
    <div class="page">
        <!-- 轮播图 -->
        <div class="slideWarp">
            <div class="m-slide m-indexSlide">
                <div class="slide-con">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" id="1" data-swiper-slide-index="1"
                                style="width: 100%; background-image: url('https://yanxuan.nosdn.127.net/static-union/1657711748c6f282.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=375x170'); background-size: 100% 100%;">
                            </div>
                            <div class="swiper-slide" id="2" data-swiper-slide-index="2"
                                style="width: 100%; background-image: url('https://yanxuan.nosdn.127.net/static-union/165872986865ab92.png?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=375x170'); background-size: 100% 100%;">

                            </div>
                            <div class="swiper-slide" id="3" data-swiper-slide-index="3"
                                style="width: 100%; background-image: url('https://yanxuan.nosdn.127.net/static-union/165849034237b102.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=375x170'); background-size: 100% 100%;">
                            </div>
                            <div class="swiper-slide" id="4" data-swiper-slide-index="4"
                                style="width: 100%; background-image: url('https://yanxuan.nosdn.127.net/static-union/1658129498000030.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=3750x170'); background-size: 100% 100%;">
                            </div>
                            <div class="swiper-slide" id="5" data-swiper-slide-index="5"
                                style="width: 100%; background-image: url('https://yanxuan.nosdn.127.net/e40f4bbf14aec95bef7f429c6e57262c.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=375x170'); background-size: 100% 100%;">
                            </div>
                            <div class="swiper-slide" id="6" data-swiper-slide-index="6"
                                style="width: 100%; background-image: url('https://yanxuan.nosdn.127.net/static-union/165849034237b102.jpg?type=webp&amp;imageView&amp;quality=75&amp;thumbnail=375x170'); background-size: 100% 100%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 标签 -->
        <div class="m-indexServicePolicy">
            <ul class="g-grow">
                <li class="item">
                    <img class="special-icon"
                        src="https://yanxuan.nosdn.127.net/a03dd909803b9ac032eba58b7253a2f6.png"></img>
                    <span class="text">网易自营品牌</span>

                </li>
                <li class="item">
                    <img class="special-icon"
                        src="https://yanxuan.nosdn.127.net/2d0402ffcd52b3ec3b07422681c42a89.png"></img>
                    <span class="text">30天无忧退货</span>
                </li>
                <li class="item">
                    <img class="special-icon"
                        src="https://yanxuan.nosdn.127.net/eb61ee48e8942dbd1784c9ee75ebe955.png"></img>
                    <span class="text">48小时快速退款</span>
                </li>
            </ul>
        </div>

        <!-- 主体分类 -->
        <div class="main-menu">
            <div class="menu-model">
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/c6fd8835a6400b7da7a016ad85506b69.png">
                    </div>
                    <div class="text">新品首发</div>
                </div>
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/fede8b110c502ec5799702d5ec824792.png">
                    </div>
                    <div class="text">居家生活</div>
                </div>
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/896a3beac514ae8f40aafe028e5fec56.png">
                    </div>
                    <div class="text">服饰鞋包</div>
                </div>
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/37520d1204a0c55474021b43dac2a69e.png">
                    </div>
                    <div class="text">美食酒水</div>
                </div>
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/6c3bd9d885c818b1f73e497335a68b47.png">
                    </div>
                    <div class="text">个护清洁</div>
                </div>
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/559d2a240ec20b096590a902217009ff.png">
                    </div>
                    <div class="text">母婴亲子</div>
                </div>
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/5c088559ebcc3f0ffcda663f04dfbeb2.png">
                    </div>
                    <div class="text">运动旅行</div>
                </div>
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/fbca8e1f2948f0c09fc7672c2c125384.png">
                    </div>
                    <div class="text">数码家电</div>
                </div>
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/static-union/1642506913355bb9.png">
                    </div>
                    <div class="text">宠物生活</div>
                </div>
                <div class="model">
                    <div class="icon">
                        <img class="img" src="https://yanxuan.nosdn.127.net/static-union/16309892614fb44c.gif">
                    </div>
                    <div class="text">每日秒杀</div>
                </div>
            </div>

            <!-- <div class="menu-model">
                
                </div> -->
        </div>

        <!-- 推广栏 -->
        <div class="promotion">

            <!-- 推广栏上方 -->
            <div class="promotion-up">
                <div class="part1">
                    <div class="inside-img">
                        <img src="https://yanxuan-item.nosdn.127.net/6c46d9570d3fe5edac9935c51c377505.png?imageView&amp;thumbnail=168x0&amp;quality=75"
                            style="width: 100%; height: 100%;">
                    </div>
                    <!-- <img style="display: block;-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);"
                        src="https://yanxuan.nosdn.127.net/static-union/165873175970c2b9.gif?imageViewquality=75"
                        width="375" height="100"> -->
                </div>
            </div>

            <!-- 推广栏下方 -->
            <div class="promotion-down">
                <div class="part2"
                    style="background-image: url('https://yanxuan.nosdn.127.net/static-union/1658741945b1184d.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=250x0'); background-size: 100% 100%;">
                    <!-- <img style="display: block;-webkit-user-select: none;max-width: 100%;margin: auto;transition: background-color 300ms;"
                        src="https://yanxuan.nosdn.127.net/static-union/1658741945b1184d.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=250x0"> -->
                    <div class="inside-img">
                        <img class="promGood promGood-315 promGood-315-0"
                            src="https://yanxuan-item.nosdn.127.net/f1197863500ff75437dfe30c16d9f87f.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=70x70">
                    </div>
                </div>
                <div class="part2"
                    style="background-image: url('https://yanxuan.nosdn.127.net/static-union/1658741939f3d58b.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=250x0'); background-size: 100% 100%;">
                    <!-- <img style="display: block;-webkit-user-select: none;max-width: 100%;margin: auto;transition: background-color 300ms;"
                        src="https://yanxuan.nosdn.127.net/static-union/1658741939f3d58b.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=250x0"> -->
                    <div class="inside-img">
                        <img class="promGood promGood-315 promGood-315-0"
                            src="https://yanxuan-item.nosdn.127.net/176e8a55961d5e1faf81d0fd89254cbd.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=70x70">
                    </div>
                </div>
                <div class="part2"
                    style="background-image: url('https://yanxuan.nosdn.127.net/static-union/16587419500c707b.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=250x0'); background-size: 100% 100%;">
                    <div class="inside-img">
                        <img class="promGood promGood-315 promGood-315-0"
                            src="https://yanxuan-item.nosdn.127.net/3e8efa497c85a6424a63aa0209efdb58.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=70x70">
                    </div>
                    <!-- <img style="display: block;-webkit-user-select: none;max-width: 100%;margin: auto;transition: background-color 300ms;"
                        src="https://yanxuan.nosdn.127.net/static-union/16587419500c707b.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=250x0"> -->
                </div>
            </div>

        </div>

        <!-- 下方展示 -->
        <div class="page-content">
            <!-- 新人专享礼专区 -->
            <div class="index-float">
                <div class="new-title">
                    <span class="text">
                        一 新人专享礼 一
                    </span>
                </div>
                <div class="content">
                    <div class="box">
                        <div class="name">新人专享礼包</div>
                        <div class="img">
                            <img class="img" src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png"
                                alt="lazyload-image">
                        </div>
                    </div>

                    <div class="box1">
                        <div class="activity">
                            <div class="pic">
                                <img class="img" src="images/咖啡.png">
                            </div>
                            <div class="text">福利社</div>
                            <div class="title">今日特价</div>

                        </div>
                        <div class="activity1">
                            <div class="pic">
                                <img class="img"
                                    src="https://yanxuan-item.nosdn.127.net/f62534d32b4bb9cc7282f782e3dbe43c.png?quality=75&type=webp&imageView&thumbnail=200x200"
                                    alt="">
                            </div>
                            <div class="text">新人拼团</div>
                            <div class="title">1元起包邮</div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 类目热销榜专区 -->
            <div class="category" id="app" v-if="this.isShow">
                <div class="title">
                    <span>类目热销榜</span>
                </div>
                <div class="content">
                    <!-- 上边框 大图标 -->
                    <div class="bigDiv">
                        <div class="big" style="background-color: #f9f3e4;">
                            <div class="name"><span>{{this.namelist[0].moduleName}}</span></div>
                            <img class="img" :src="this.namelist[0].src" alt="lazyload-image">
                        </div>
                        <div class="big1" style="background-color: #ebeff6;">
                            <div class="name"><span>{{this.namelist[1].moduleName}}</span></div>
                            <img class="img" :src="this.namelist[1].src" alt="lazyload-image">
                        </div>
                    </div>


                    <!-- 下边框 小图标  浮动-->
                    <div class="smallDiv">
                        <div class="small">
                            <div class="name" ><span>{{this.namelist[2].moduleName}}</span></div>
                            <img class="img" :src="this.namelist[2].src" alt="lazyload-image">
                        </div>
                        <div class="small">
                            <div class="name"><span>{{this.namelist[3].moduleName}}</span></div>
                            <img class="img" :src="this.namelist[3].src" alt="lazyload-image">
                        </div>
                        <div class="small">
                            <div class="name"><span>{{this.namelist[4].moduleName}}</span></div>
                            <img class="img" :src="this.namelist[4].src" alt="lazyload-image">
                        </div>
                        <div class="small">
                            <div class="name"><span>{{this.namelist[5].moduleName}}</span></div>
                            <img class="img" :src="this.namelist[5].src" alt="lazyload-image">
                        </div>
                        <div class="small">
                            <div class="name"><span>{{this.namelist[6].moduleName}}</span></div>
                            <img class="img" :src="this.namelist[6].src" alt="lazyload-image">
                        </div>
                        <div class="small">
                            <div class="name"><span>{{this.namelist[7].moduleName}}</span></div>
                            <img class="img" :src="this.namelist[7].src" alt="lazyload-image">
                        </div>
                        <div class="small">
                            <div class="name"><span>{{this.namelist[8].moduleName}}</span></div>
                            <img class="img" :src="this.namelist[8].src" alt="lazyload-image">
                        </div>
                        <div class="small" style="background-color: #fff;">

                        </div>
                    </div>

                </div>
            </div>

            <!-- 下方其他推荐 -->
            <div class="other">
                <div class="left">
                    <div class="title"><span>好好睡</span></div>
                    <div class="desc"><span>消暑法宝</span></div>
                    <div class="img"><img
                            src="https://yanxuan-item.nosdn.127.net/9a33f08a3b0f5c06fdf4c586d51b2f7c.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=75x75"
                            class="pic"></div>
                    <div class="img"><img
                            src="https://yanxuan-item.nosdn.127.net/84454f5de65796c78a5ef9f3d6b7d843.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=75x75"
                            class="pic"></div>
                </div>

                <div class="right">
                    <div class="title"><span>严选众筹</span></div>
                    <div class="desc"><span>探索美与用</span></div>
                    <div class="img"><img
                            src="https://yanxuan-item.nosdn.127.net/d398ebb1be7fd30f1e3c2a41b30c4ba9.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=75x75"
                            class="pic"></div>
                    <div class="img"><img
                            src="https://yanxuan-item.nosdn.127.net/e9f01fb9a3d9e18f7a42dd9231390beb.png?quality=75&amp;type=webp&amp;imageView&amp;thumbnail=75x75"
                            class="pic"></div>
                </div>
            </div>

            <!-- 底部栏 -->
            <div class="bottom">
                <div class="a-butn">
                    <div class="button" style="margin-right: 0.5rem;">
                        <a>下载app</a>
                    </div>
                    <div class="button">
                        <a>电脑版</a>
                    </div>
                </div>


                <div class="b-trademark">
                    <p class="b-copyright">网易公司版权所有 © 1997-2022<br>食品经营许可证：JY13301080111719</p>
                </div>

            </div>
        </div>
    </div>

    <!-- 下方导航栏 -->
    <div class="tabBar-wrap">
        <nav class="m-tabBar">
            <div class="item select">
                <i class="u-icon-home" style="background-image: url('images/t2.png');"></i>
                <span class="text">首页</span>
            </div>
            <div class="item">
                <i class="u-icon-home" style="background-image: url('images/t4.png');"></i>
                <span class="text">分类</span>
            </div>
            <div class="item">
                <i class="u-icon-home" style="background-image: url('images/t5.png');"></i>
                <span class="text">值得买</span>
            </div>
            <div class="item">
                <i class="u-icon-home" style="background-image: url('images/t1.png');"></i>
                <span class="text">购物车</span>
            </div>
            <div class="item">
                <i class="u-icon-home" style="background-image: url('images/t3.png');"></i>
                <span class="text">个人</span>
            </div>
        </nav>
    </div>
    
</body>
<script src="js/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/moble.js"></script>

</html>